<template>
  <!-- 对话框(添加 / 修改) -->
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="500px"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="群组名称" prop="groupName">
        <el-input v-model="form.groupName" placeholder="请输入群组名称" />
      </el-form-item>
      <el-form-item label="角色集合" prop="roleList">
        <div class="list-group">
          <el-tag
            closable
            v-for="(item, index) in roleArray"
            :key="index"
            @close="onRoleClose(index)"
            >{{ item.name }}</el-tag
          >
        </div>
        <el-button @click="roleopen = true">关联</el-button>
      </el-form-item>
      <el-form-item label="用户集合" prop="userIds">
        <div class="list-group">
          <el-tag
            closable
            v-for="(item, index) in userArray"
            :key="index"
            @close="onClose(index)"
            >{{ item.name }}</el-tag
          >
        </div>
        <el-button @click="open = true">关联</el-button>
      </el-form-item>
      <el-form-item label="群组描述" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入群组描述"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <user-list :show.sync="open" @success="getUserData"></user-list>
    <role-list :show.sync="roleopen" @success="getRoleData"></role-list>
  </el-dialog>
</template>

<script>
import { createRoleGroup, updateRoleGroup } from "@/api/system/roleGroup";
import {
  getUserList,
} from "@/api/system/user";
import {
  getRoleList,

} from "@/api/system/role";
import userList from "./userList.vue";
import roleList from "./roleList.vue";
export default {
  name: "RoleGroupEdit",
  components: {
    userList,
    roleList
  },
  data() {
    return {
      open: false,
      roleopen: false,
      userArray: [],
      roleArray: [],
      userIds: [],
      roleList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        groupName: [{ required: true, message: "群组名称不能为空", trigger: "blur" }],
        roleList: [{ required: false, message: "角色集合不能为空", trigger: "blur" }],
        userIds: [{ required: false, message: "角色集合不能为空", trigger: "blur" }],
      }
    };
  },
  created() { },
  props: {
    // 是否显示弹出层
    show: {
      type: Boolean,
      default: false
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    /** 初始化编辑的数据**/
    initData(rowData) {
      this.reset();
      if (rowData && rowData.id) {
        this.form = rowData;
        this.userIds = rowData.userIds;
        this.roleList = rowData.roleList;
        this.getUserListData();
        this.getRoleListData();
        this.form.datetimerange = [this.form.startTime, this.form.endTime]
      }
    },
    /** 取消按钮 */
    cancel() {
      this.$emit('update:show', false)
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        groupName: undefined,
        roleList: [],
        userIds: [],
        remark: undefined
      };
      this.userIds = [];
      this.roleList = [];
      this.userArray = [];
      this.roleArray = [];
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        this.form.userIds = this.userIds;
        this.form.roleList = this.roleList;
        // 修改的提交
        if (this.form.id != null) {
          updateRoleGroup(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.cancel();
            this.$emit('success')
          });
          return;
        }
        // 添加的提交
        createRoleGroup(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.cancel();
          this.$emit('success')
        });
      });
    },

    //用户选中
    getUserData(data) {
      this.userArray.push({ name: data.nickname, id: data.id })
      this.userIds.push(data.id);
    },
    //删除
    onClose(index) {
      this.userArray.splice(index, 1);
      this.userIds = [];
      this.userArray.map((item) => {
        this.userIds.push(item.id);
      })
    },
    //获取用户数据
    getRoleData(data) {
      this.roleArray.push({ name: data.name, id: data.id })
      this.roleList.push(data.id);
    },
    //删除
    onRoleClose(index) {
      this.roleArray.splice(index, 1);
      this.roleList = [];
      this.roleArray.map((item) => {
        this.roleList.push(item.id);
      })

    },

    //获取用户列表数据
    getUserListData() {
      let ids = this.userIds ? this.userIds.join(",") : '';
      if (ids) {
        getUserList({ ids }).then((response) => {
          let data = response.data;
          data.forEach((item) => {
            this.userArray.push({ name: item.nickname, id: item.id })
          })
        })
      }
    },
    //获取角色列表数据
    getRoleListData() {
      let ids = this.roleList ? this.roleList.join(",") : '';
      if (ids) {
        getRoleList({ ids }).then((response) => {
          let data = response.data;
          data.forEach((item) => {
            this.roleArray.push({ name: item.name, id: item.id })
          })
        })
      }
    }
  }
};
</script>
<style scoped lang="scss">
.list-group {
  margin-bottom: 10px;
  span {
    margin-right: 8px;
  }
}
</style>